<template>
  <el-dialog v-model="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
    :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
      <el-form-item label="广告标题" prop="title">
        <el-input v-model="dataForm.title" placeholder="广告标题"></el-input>
      </el-form-item>
      <el-form-item label="合作商名称" prop="partner">
        <el-input v-model="dataForm.partner" placeholder="合作商名称"></el-input>
      </el-form-item>
      <el-form-item label="图片地址">
        <el-button v-if="advertiseUpload === null ? true : !advertiseUpload.imgUrl" placeholder="图片地址" type="primary"
          @click="advertiseUploadShow()">上传图片地址</el-button>
        <!-- <el-input v-else disabled :value="advertiseUpload.imgUrl" /> -->
        <el-button v-else type="primary" @click="imgShow(advertiseUpload.imgUrl)">查看图片</el-button>

      </el-form-item>
      <el-form-item label="图片链接地址" prop="link">
        <el-input v-model="dataForm.link" placeholder="图片链接地址"></el-input>
      </el-form-item>
      <el-form-item label="广告生效日期" prop="effectiveDate">
        <el-date-picker type="datetime" placeholder="广告生效日期" v-model="dataForm.effectiveDate" format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="广告失效日期" prop="expiringDate">
        <el-date-picker type="datetime" placeholder="广告失效日期" v-model="dataForm.expiringDate" format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="状态" prop="delFlag">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="1" :disabled="dataForm.expiringDate < formattedDate()">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
    </template>
  </el-dialog>
  <advertise-upload ref="advertiseUpload"></advertise-upload>
  <el-dialog v-model="imgVisible" width="30%" top="10px">
    <img :src="advertiseUpload.imgUrl" style="width: 100%;height: 100%;">
  </el-dialog>
</template>

<script lang="ts" setup>
import { watch, onMounted, reactive, ref } from "vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import tfileUpload from "./tfile-upload.vue";
import AdvertiseUpload from "@/views/poap/advertise-upload.vue";
const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);

const imgVisible = ref(false);
const imgUrl = ref("");

const imgShow = (row: any) => {
  imgVisible.value = true;
  imgUrl.value = row.url
}

const advertiseUpload = ref();
const advertiseUploadShow = () => {
  advertiseUpload.value.init();
};

const visible = ref(false);
const dataFormRef = ref();

const dataForm = reactive({
  id: "",
  title: "",
  ossId: "",
  partner: "",
  url: "",
  link: "",
  effectiveDate: "",
  expiringDate: "",
  delFlag: "",
  createDate: "",
  creator: "",
  updateDate: "",
  updater: "",
  status: ""
});

const rules = ref({});

const init = (id?: number) => {
  visible.value = true;
  dataForm.id = "";

  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields();
  }

  if (id) {
    getInfo(id);
  }
};

// 获取信息
const getInfo = (id: number) => {
  baseService.get("/poapweb/poapadvertisement/" + id).then((res) => {
    Object.assign(dataForm, res.data);
    console.log(dataForm,124214141);
    
  });
};
const formattedDate = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hour = date.getHours().toString().padStart(2, '0');
  const minute = date.getMinutes().toString().padStart(2, '0');
  const second = date.getSeconds().toString().padStart(2, '0');
  const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  return formattedDate;
}
// 表单提交
const dataFormSubmitHandle = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false;
    }
    if (!(dataForm.id || advertiseUpload.value.imgUrl !== '')) {
      ElMessage.warning('还未上传图片')
        return false;
    }
    if (dataForm.effectiveDate > dataForm.expiringDate) {
      ElMessage.warning('失效日期不能小于生效日期')
      return false;
    }

    dataForm.url = advertiseUpload.value.imgUrl;

    (!dataForm.id ? baseService.post : baseService.put)("/poapweb/poapadvertisement", dataForm).then((res) => {
      ElMessage.success({
        message: t("prompt.success"),
        duration: 500,
        onClose: () => {
          visible.value = false;
          emit("refreshDataList");
        }
      });
    }).finally(() => {
      if (dataForm.expiringDate < formattedDate()) {
        ElMessage.warning('时间已过期,默认为禁用')
      }

    });
  });
};
defineExpose({
  init
});
</script>
